<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-indigo-600 to-purple-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="home-b2c.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">商品管理</h1>
                <button onclick="addNewProduct()" class="text-white hover:opacity-80">
                    <i class="fas fa-plus text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="px-4 py-3 bg-gray-50">
            <div class="grid grid-cols-3 gap-3">
                <div class="bg-white rounded-lg p-3 text-center border border-gray-200">
                    <p class="text-2xl font-bold text-indigo-600">128</p>
                    <p class="text-xs text-gray-600">在售商品</p>
                </div>
                <div class="bg-white rounded-lg p-3 text-center border border-gray-200">
                    <p class="text-2xl font-bold text-orange-600">5</p>
                    <p class="text-xs text-gray-600">库存预警</p>
                </div>
                <div class="bg-white rounded-lg p-3 text-center border border-gray-200">
                    <p class="text-2xl font-bold text-green-600">98.5%</p>
                    <p class="text-xs text-gray-600">好评率</p>
                </div>
            </div>
        </div>

        <!-- Tab Navigation -->
        <div class="px-4 py-2 bg-white border-b border-gray-200">
            <div class="flex space-x-4">
                <button class="pb-2 border-b-2 border-indigo-600 text-indigo-600 font-medium text-sm tab-btn" data-tab="selling">
                    在售中(128)
                </button>
                <button class="pb-2 text-gray-500 text-sm tab-btn" data-tab="offline">
                    已下架(12)
                </button>
                <button class="pb-2 text-gray-500 text-sm tab-btn" data-tab="warning">
                    库存预警(5)
                </button>
                <button class="pb-2 text-gray-500 text-sm tab-btn" data-tab="pending">
                    待审核(3)
                </button>
            </div>
        </div>

        <!-- Search Bar -->
        <div class="px-4 py-3 bg-white border-b border-gray-100">
            <div class="flex items-center bg-gray-100 rounded-lg px-3 py-2">
                <i class="fas fa-search text-gray-400 mr-2"></i>
                <input type="text" placeholder="搜索商品名称/SKU" class="flex-1 bg-transparent text-sm outline-none">
            </div>
        </div>

        <!-- Product Lists Container -->
        <div class="h-[calc(852px-290px)] overflow-y-auto">
            <!-- 在售中商品 -->
            <div id="selling-tab" class="tab-content">
                <div class="px-4 py-3 bg-white border-b border-gray-100">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium">无线蓝牙耳机 Pro Max</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: BT-001-PRO</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" checked class="sr-only peer">
                                    <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-red-600 font-bold">¥299</span>
                                    <span class="text-gray-400 line-through">¥399</span>
                                    <span class="text-green-600">库存: 186</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-blue-600 text-xs">编辑</button>
                                    <button class="text-gray-600 text-xs">下架</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-3 bg-white border-b border-gray-100">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1484704849700-f032a568e944?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium">便携充电宝 20000mAh</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: PB-20K-WHT</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" checked class="sr-only peer">
                                    <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-red-600 font-bold">¥89</span>
                                    <span class="text-gray-400 line-through">¥129</span>
                                    <span class="text-green-600">库存: 325</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-blue-600 text-xs">编辑</button>
                                    <button class="text-gray-600 text-xs">下架</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-3 bg-white border-b border-gray-100">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1585298723682-7115561c51b7?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium">无线键盘鼠标套装</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: KB-MS-001</p>
                                </div>
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input type="checkbox" checked class="sr-only peer">
                                    <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-green-500 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all"></div>
                                </label>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-red-600 font-bold">¥159</span>
                                    <span class="text-gray-400 line-through">¥229</span>
                                    <span class="text-green-600">库存: 96</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-blue-600 text-xs">编辑</button>
                                    <button class="text-gray-600 text-xs">下架</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 已下架商品 -->
            <div id="offline-tab" class="tab-content" style="display: none;">
                <div class="px-4 py-3 bg-white border-b border-gray-100 opacity-75">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1572635196237-14b3f281503f?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium text-gray-600">可折叠蓝牙音箱</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: SPK-FLD-001</p>
                                </div>
                                <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">已下架</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-gray-600 font-bold">¥199</span>
                                    <span class="text-gray-400 line-through">¥299</span>
                                    <span class="text-gray-500">库存: 25</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-blue-600 text-xs">编辑</button>
                                    <button class="text-green-600 text-xs">上架</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-3 bg-white border-b border-gray-100 opacity-75">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium text-gray-600">USB-C 多功能扩展坐</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: HUB-C-007</p>
                                </div>
                                <span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">已下架</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-gray-600 font-bold">¥129</span>
                                    <span class="text-gray-400 line-through">¥189</span>
                                    <span class="text-gray-500">库存: 0</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="text-blue-600 text-xs">编辑</button>
                                    <button class="text-green-600 text-xs">上架</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 库存预警商品 -->
            <div id="warning-tab" class="tab-content" style="display: none;">
                <div class="px-4 py-3 bg-orange-50 border-b border-orange-100">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium">智能手表 Series 6</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: SW-006-BLK</p>
                                </div>
                                <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded font-medium">低库存</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-red-600 font-bold">¥1299</span>
                                    <span class="text-gray-400 line-through">¥1699</span>
                                    <span class="text-orange-600 font-medium">库存: 3</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="bg-orange-500 text-white text-xs px-3 py-1 rounded">立即进货</button>
                                    <button class="text-blue-600 text-xs">编辑</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-3 bg-orange-50 border-b border-orange-100">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium">智能手环 Pro</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: FIT-PRO-002</p>
                                </div>
                                <span class="bg-red-100 text-red-600 text-xs px-2 py-1 rounded font-medium">急需进货</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-red-600 font-bold">¥399</span>
                                    <span class="text-gray-400 line-through">¥499</span>
                                    <span class="text-red-600 font-medium">库存: 1</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="bg-red-500 text-white text-xs px-3 py-1 rounded">紧急进货</button>
                                    <button class="text-blue-600 text-xs">编辑</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 待审核商品 -->
            <div id="pending-tab" class="tab-content" style="display: none;">
                <div class="px-4 py-3 bg-yellow-50 border-b border-yellow-100">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=80&h=80&fit=crop" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium">新款跑步鞋 2025</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: RUN-2025-001</p>
                                </div>
                                <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded font-medium">待审核</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-red-600 font-bold">¥599</span>
                                    <span class="text-gray-500">待审核价格</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="bg-blue-500 text-white text-xs px-3 py-1 rounded">查看审核</button>
                                    <button class="text-blue-600 text-xs">编辑</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="px-4 py-3 bg-yellow-50 border-b border-yellow-100">
                    <div class="flex items-start">
                        <img src="https://images.unsplash.com/photo-1706275399762-3989a59e6249?q=80&w=880&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" 
                             alt="商品" class="w-20 h-20 rounded-lg object-cover mr-3">
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-sm font-medium">无线充电器 15W</h3>
                                    <p class="text-xs text-gray-500 mt-1">SKU: CHG-15W-003</p>
                                </div>
                                <span class="bg-yellow-100 text-yellow-600 text-xs px-2 py-1 rounded font-medium">待审核</span>
                            </div>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-3 text-xs">
                                    <span class="text-red-600 font-bold">¥199</span>
                                    <span class="text-gray-500">待审核价格</span>
                                </div>
                                <div class="flex space-x-2">
                                    <button class="bg-blue-500 text-white text-xs px-3 py-1 rounded">查看审核</button>
                                    <button class="text-blue-600 text-xs">编辑</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pb-32"></div>
        </div>

        <!-- Bottom Actions -->
        <div class="absolute bottom-1 left-0 right-0 bg-white border-t border-gray-200 px-4 py-3 shadow-lg">
            <div class="flex items-center justify-between">
                <label class="flex items-center">
                    <input type="checkbox" class="mr-2">
                    <span class="text-sm font-medium">全选</span>
                </label>
                <div class="flex space-x-3">
                    <button class="bg-gray-500 text-white text-sm px-4 py-2 rounded-lg font-medium">批量下架</button>
                    <button class="bg-indigo-600 text-white text-sm px-4 py-2 rounded-lg font-medium">批量编辑</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tab Switch JavaScript -->
    <script>
        // Tab switching functionality
        document.addEventListener('DOMContentLoaded', function() {
            const tabButtons = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');
            
            tabButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Remove active state from all tabs
                    tabButtons.forEach(tab => {
                        tab.classList.remove('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-medium');
                        tab.classList.add('text-gray-500');
                    });
                    
                    // Add active state to clicked tab
                    this.classList.remove('text-gray-500');
                    this.classList.add('border-b-2', 'border-indigo-600', 'text-indigo-600', 'font-medium');
                    
                    // Get tab data
                    const tabType = this.getAttribute('data-tab');
                    
                    // Hide all tab contents
                    tabContents.forEach(content => {
                        content.style.display = 'none';
                    });
                    
                    // Show selected tab content
                    const activeTabContent = document.getElementById(tabType + '-tab');
                    if (activeTabContent) {
                        activeTabContent.style.display = 'block';
                    }
                    
                    console.log('Switched to tab:', tabType);
                });
            });
            
            // Initialize first tab as active
            const firstTab = document.querySelector('.tab-btn');
            const firstTabContent = document.getElementById('selling-tab');
            if (firstTab && firstTabContent) {
                firstTabContent.style.display = 'block';
            }
        });

        // Add new product function
        function addNewProduct() {
            window.location.href = 'add-product.html';
        }
    </script>
</body>
</html>